<!--
 * @Description: useThrottleFn（节流函数）
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:35:25
 * @LastEditTime: 2022-12-30 13:09:51
 * @LastEditors: r_yuesheng
-->
<template>
  <div>
    <el-button @click="clickedFn">点击我</el-button>
    <div>已点击次数：{{clickValue}}</div>
    <div>节流次数：{{throttleValue}}</div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue';
import { useThrottleFn } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    function initState() {
      return {
        clickValue: 0,
        throttleValue: 0,
      };
    }
    const state = reactive(initState());
    function clickedFn() {
      state.clickValue += 1;
      throttleFn();
    }
    const throttleFn = useThrottleFn(() => {
      state.throttleValue += 1;
    }, 1000);
    return {
      ...toRefs(state),
      clickedFn,
    };
  },
};
</script>